<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边导航栏</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <div class="asideNav">
        <div class="nav">
            <!-- 因为bootstrap的图标本身有定位,所以放在盒子里解决冲突 -->
            <div id="Nav">
                <div class="glyphicon glyphicon-align-justify"></div>
            </div>
            <ul>
                <li>
                    <div class="glyphicon glyphicon-home">
                        <a href="javascript:;">
                            <p>首页</p>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="glyphicon glyphicon-lock">
                        <a href="javascript:;">
                            <p>商品</p>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="glyphicon glyphicon-shopping-cart">
                        <a href="javascript:;">
                            <p>购物车</p>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="glyphicon glyphicon-user">
                        <a href="javascript:;">
                            <p>个人中心</p>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="glyphicon glyphicon-th-large">
                        <a href="javascript:;">
                            <p>设置</p>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="glyphicon glyphicon-sunglasses">
                        <a href="javascript:;">
                            <p>夜间模式</p>
                        </a>
                    </div>
                </li>

            </ul>
            <div id="Nodes">
                <div class="glyphicon glyphicon-info-sign">
                    <a href="javascript:;">
                        <p>用户需知</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>

</html>